import React, {Component} from 'react'
import SystemMsgVM from 'cvm/mine/systemMsg'
import './index.less'
import { observer } from 'mobx-react/custom'
import LoadMore from 'components/common/loadMore'

const Content = observer(({ vm }) => {
  if (vm.pageInfo.status !== 'loading' && vm.data.length === 0) {
    return <div className='nothing-count'>暂无数据</div>
  }
  return (
    <div className='active-list-detail'>
      {vm.data.map((item, index) => {
        return (
          <div key={index} className='system-message '>
            <div className='flex-wrap'>
              <div className='flex-1 title'>{item.Type}</div>
              <div className='flex-1 time'>{item.CreateTime}</div>
            </div>
            <div className='detail-text'>{item.SystemMessageContent}</div>
          </div>
        )
      })}
    </div>
  )
})

@observer
export default class SystemMsg extends Component {
  vm = new SystemMsgVM(this.props)
  constructor (props) {
    super(props)
    window.document.title = '消息通知'
  }

  render () {
    return (
      <div>
        <Content vm={this.vm} />
        {this.vm.pageInfo.page !== 1 &&
          <LoadMore status={this.vm.pageInfo.status}
            handleLoadMore={this.vm.handleLoadMore} />
        }
      </div>
    )
  }
}
